<template>
  <div class="app-container">
    <div class="search-bar">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="发放阶段">
          <!-- <granNext></granNext> -->
          <el-select v-model="queryParams.sourceList" placeholder="请选择" clearable multiple style="width: 200px">
            <el-option v-for="itme in sourceList" :key="itme.value" :label="itme.label" :value="itme.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="发放时间">
          <!-- <el-date-picker
            v-model="queryParams.createdTime"
            type="datetime"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          /> -->
          <el-date-picker v-model="tempTime" :editable="false" type="datetimerange" range-separator="~"
            start-placeholder="开始时间" end-placeholder="截止时间" value-format="YYYY-MM-DD HH:mm:ss" @change="handleChange" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">
            <template #icon>
              <Search />
            </template>
            搜索
          </el-button>
          <el-button @click="handleResetQuery">
            <template #icon>
              <Refresh />
            </template>
            重置
          </el-button>
        </el-form-item>
      </el-form>
    </div>
    <BasePageTable :table-data="tableData" :table-columns-data="tableColumnsData" :loading="loading" :total="total"
      @handleQuery="changePage">
      <template #index="scope">
        {{ scope.index + 1 }}
      </template>
      <template #house="{ row, name }">
        {{ row.consumerHouseVO?.neighborhood }}
        {{ row.consumerHouseVO?.houseNumber }}
      </template>
      <template #source="{ row, name }">
        {{ getLabelByValue(COUINS_SOURCE_ENUM, row.source) }}
      </template>
    </BasePageTable>
  </div>
</template>
<script setup>
import granNext from "@/components/GrantNext/index.vue";
import grantsAPI from "@/api/coins/grant-api";
import { COUINS_SOURCE_ENUM } from "@/enums/conins/CoinsGrant";
import { getLabelByValue, getLabelValueList } from "@/utils/enums";

const sourceList = getLabelValueList(COUINS_SOURCE_ENUM);
const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  sourceList: "",
  beginTime: "",
  endTime: "",
});
const tableData = ref([]);
const loading = ref(false);
const total = ref(0);
const tempTime = ref();
const tableColumnsData = ref([
  {
    label: "序号",
    prop: "index",
    align: "center",
    width: 60,
    showOverflowTooltip: true,
    customSlot: "index",
  },
  {
    prop: "categoryText",
    label: "房屋信息",
    showOverflowTooltip: true,
    customSlot: "house",
  },
  {
    prop: "consumerHouseVO.ownName",
    label: "用户名称",
    showOverflowTooltip: true,
  },
  {
    prop: "coins",
    label: "发放积分",
    showOverflowTooltip: true,
  },
  {
    prop: "transactionTime",
    label: "发放时间",
    showOverflowTooltip: true,
  },
  {
    prop: "source",
    label: "发放阶段",
    showOverflowTooltip: true,
    customSlot: "source",
  },
  {
    prop: "consumerHouseVO.decorationBudget",
    label: "装修预算(元)",
    showOverflowTooltip: true,
  },
  {
    prop: "consumerHouseVO.size",
    label: "房屋面积",
    showOverflowTooltip: true,
  },
  // {
  //   prop: "createTime",
  //   label: "注册时间",
  //   showOverflowTooltip: true,
  // },
  {
    prop: "description",
    label: "描述",
    showOverflowTooltip: true,
  },
]);
function handleChange(val) {
  if (val) {
    const [startTime, endTime] = val;
    queryParams.beginTime = startTime;
    queryParams.endTime = endTime;
  } else {
    queryParams.beginTime = "";
    queryParams.endTime = "";
  }
}
function handleSearch() {
  queryParams.pageNum = 1;
  getList();
}
// 重置查询
function handleResetQuery() {
  queryParams.sourceList = [];
  queryParams.pageNum = 1;
  queryParams.beginTime = "";
  queryParams.endTime = "";
  tempTime.value = {};
  getList();
}

function getList() {
  loading.value = false;
  try {
    grantsAPI
      .getPage(queryParams)
      .then((data) => {
        tableData.value = data.list || [];
        total.value = data.total;
      })
      .finally(() => {
        loading.value = false;
      });
  } catch (err) { }
}
function changePage(val) {
  queryParams.pageNum = val.pageNum;
  queryParams.pageSize = val.pageSize;
  getList();
}
onMounted(async () => {
  getList();
});
</script>
